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Apa yang Dimaksud Prinsip Hierarki Visual? 


Situs Interaction Design Foundation mengatakan, hierarki visual adalah sebuah prinsip 
tata letak (layout) elemen desain yang tujuannya menampilkan hal penting lebih dulu, 
kemudian yang lebih tidak penting. 


Artinya, desain tersebut harus mampu menampilkan poin utama dan dipahami oleh siapa 
pun yang melihat. 


Desain itu pula yang kemudian akan memengaruhi keputusan seseorang, untuk 
bertindak sesuai dengan apa yang dimaksud oleh visual designer. 


Prinsip hierarki visual ini berlaku luas, untuk segala sesuatu yang bisa didesain, mulai 
dari poster, flyer, website, hingga tampilan apps. 


Bisa dibilang, prinsip ini sangat berguna bagi para UI designer. Pernahkah kamu 
membuka sebuah apps, tapi bingung mana yang mau kamu cari karena semua tampak 
serupa? 


Nah, jika pernah, desain UI yang dipakai mungkin belum mengadopsi prinsip-prinsip ini. 


Apa Saja Prinsip Hierarki Visual? 


Berikut ini adalah prinsip hierarki visual yang sudah Glints rangkum untukmu dari Visme 
dan G2: 


1. Ukuran dan skala 


BEFORE 
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Secara sederhana, gambar yang lebih besar tentu akan menarik perhatian kamu lebih 
dulu, bukan, dibandingkan yang kecil? 


Itu sebabnya, kamu sering kali melihat informasi utama di situs tertentu atau koran 
sebagai yang paling besar. 


Bukan hanya untuk menarik perhatian, elemen yang berukuran besar seharusnya 
membawa pesan yang paling penting. 


Kamu juga perlu memperhatikan skala dari gambar tersebut. Apalagi, jika kamu akan 
menampilkan beberapa elemen desain. 


Penentuan skala membantu kita sebagai desainer grafis, juga audiens, mengetahui mana 
yang lebih dominan. 


2. Warna dan kontras 
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Prinsip hierarki visual selanjutnya adalah warna dan kontras. Pemilihan warna dan 
kontras tentu akan membuat satu elemen lebih menonjol dibandingkan yang lainnya. 


Nah, cara ini juga perlu kamu gunakan dalam desainmu, untuk menginformasikan 
kepada user, elemen mana yang ingin kamu unggulkan. 


Warm colors, seperti merah atau kuning akan lebih standout jika disandingkan dengan 
background berwarna gelap (cool color). 


Meski kontras warna membantu menonjolkan desain, menggunakan terlalu banyak juga 
akan membuat bingung. Hal ini akan mengaburkan elemen desain yang penting. 
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Perlu diingat, prinsip hierarki ini harus menjadi sebuah panduan bagi pembaca, users, 
atau audiens lainnya, dalam memahami sebuah desain. 


3. Tipografi 


BEFORE 
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Mengombinasikan beberapa ukuran font dalam satu desain juga dapat membantu 
menentukan elemen paling penting dari sebuah desain. 


Contoh paling gampang, kamu tentu pernah melihat sebuah surat kabar bukan? 


Beberapa di antaranya ditulis dengan beragam ukuran font, untuk menentukan berita 
mana yang jadi tajuk utama. 


4. Ruang kosong 


BEFORE 
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Dalam mendesain, terkadang ada keinginan untuk memenuhi ruang-ruang kosong yang 
masih tersisa. 


Padahal, menciptakan ruang kosong merupakan salah satu prinsip hierarki visual yang 
penting. 
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Adanya ruang kosong pada desain yang kamu buat bisa membuat objek utamamu 
menjadi “terlihat”. 


Sebaliknya, menambah terlalu banyak gambar justru akan membuat desainmu tampak 
ramai dan kehilangan fokus. 


5, Pola membaca 
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Ada dua pola membaca yang menjadi prinsip dalam hierarki visual, yakni pola F dan pola 
Z: 


Pola membaca F adalah pola yang paling umum digunakan banyak orang. Sebab, ini 
adalah pola yang juga kita gunakan ketika membaca sehari-hari. Beberapa menyebutnya 
sebagai pola E. 


Kita akan mulai membaca dari kiri kemudian ke kanan, baru beranjak ke informasi yang 
ada di bawahnya. Itu sebabnya, web designer yang bertugas mendesain website yang 
padat dengan teks akan menggunakan pola ini. 


Baca Juga: 15 Tips Belajar Web Design untuk Jadi Web Designer Andal 
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Sementara itu, pola membaca Z biasanya lebih banyak dipakai untuk situs yang 
berbasis gambar. Hal ini karena otak manusia memproses gambar lebih cepat ketimbang 
teks. 


Lewat pola ini, informasi penting akan diletakkan di paling atas. 


Setelahnya, pengguna akan menyapu pandangannya ke sebelah kanan, untuk kemudian 
secara diagonal melihat apa yang ada di kiri bawah. Itu sebabnya, pola ini disebut 
sebagai pola Z. 


6. Kedekatan (proximity) 


BEFORE AFTER 


AI Aa 


.... Xí 


» 


IL. L 


©Visme.co 


Menempatkan beberapa objek berdekatan merupakan salah satu prinsip dasar dalam 
menyampaikan pesan pada format visual. 


Objek yang ditempatkan berdekatan menandakan bahwa elemen-elemen tersebut 
memiliki hubungan. 


7. Rule of third 


BEFORE 
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NEL 
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Rule of third merupakan salah satu prinsip hierarki visual, sekaligus teknik fotografi yang 
sudah sangat umum. 


Ya, untuk menghasilkan komposisi gambar yang seimbang, para fotografer biasanya 
akan membagi bidang fotonya menjadi 3 bagian, sebelum menangkap objek. 


Cara ini bisa membantu gambar terlihat “berbicara” dibandingkan gambar yang selalu 
diletakkan di tengah bidang. 
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